<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评分分类分析</title>
    <link rel="stylesheet" href="http://unpkg.com/layui@2.6.8/dist/css/layui.css">
    <link rel="stylesheet" href="./index.css">
    <script src="./echarts.min.js"></script>
</head>

<body>
    <div>
        <div class="layui-row">
            <form class="layui-form layui-col-md12 x-so" action="" method="get">
                <div>
                    <label class="layui-form-label">时间：</label>
                    <div class="layui-inline layui-date-range" id="test-range">
                        <div class="layui-input-inline">
                            <input type="text" name="start_time" id="start_time" class="layui-input" placeholder="开始时间">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline">
                            <input type="text" name="end_time" id="end_time" class="layui-input" placeholder="结束时间">
                        </div>
                    </div>
                </div>
                <div>
                    <label class="layui-form-label">所属区域：</label>
                    <div class="layui-input-block">
                        <select name="region" id="region" lay-filter="region" lay-verify="required" lay-search="">
                            <option value="">全部</option>
                        </select>
                    </div>
                </div>
                <div>
                    <label class="layui-form-label">项目名称：</label>
                    <div class="layui-input-block">
                        <select name="project_id" id="project_id" lay-filter="project_id" lay-verify="required"
                            lay-search="">
                            <option value="">全部</option>
                        </select>
                    </div>
                </div>
                <div>
                    <label class="layui-form-label">工单类型：</label>
                    <div class="layui-input-block">
                        <select name="work_order_type" id="work_order_type" lay-filter="work_order_type" lay-verify="required" lay-search="">
                            <option value="">全部</option>
                            <option value="1">报修工单</option>
                            <option value="2">咨询工单</option>
                            <option value="3">投诉工单</option>
                        </select>
                    </div>
                </div>
                <button type="button" class="layui-btn" onclick="getData()">查询</button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="initial()">重置</button>
            </form>
        </div>
        <!-- 内容 -->
        <div class="content">
            <div class="order_list order_list1">

            </div>
            <!--  -->
            <div class="order_list order_list2">

            </div>
            <!--  -->
            <div class="order_list">
                <div class="order_echarts">
                    <div class="order_item_title">评价业主</div>
                    <div class="order_item_echarts mt30">
                        <div id="main" style="width: 600px;height:400px;"></div>
                    </div>
                </div>
                <div class="order_echarts">
                    <div class="order_item_title">评价种类</div>
                    <div class="order_item_echarts mt30">
                        <div id="main2" style="width: 600px;height:400px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="http://unpkg.com/layui@2.6.8/dist/layui.js"></script>
<script src="./index.js"></script>
<script>
    var laydate = layui.laydate;
    laydate.render({
        elem: '#test-range',
        range: ['#start_time', '#end_time']
    });

    let data = {}

    // 获取数据
    getData()

    function getData() {
        $.ajax({
            type: 'post',
            url: 'http://xdwy-develop.huijik.com/base/score_data',
            data: {
                start_time: $('#start_time').val(),
                end_time: $('#end_time').val(),
                project_id: $('#project_id').val(),
                region_id: $('#region').val(),
                work_order_type: $('#work_order_type').val(),
            },
            dataType: 'json',
            success: function (res) {
                data = res.data

                echartsInit()

                $('.order_list1').html(`<div class="order_item">
                            <div class="order_item_title">业主自主评价</div>
                            <div class="order_item_num">
                                <p><span>${data.user_evaluation}</span>人</p>
                            </div>
                        </div>
                        <div class="order_item">
                            <div class="order_item_title">后台评价</div>
                            <div class="order_item_num">
                                <p><span>${data.platform_evaluation}</span>人</p>
                            </div>
                        </div>
                        <div class="order_item">
                            <div class="order_item_title">超时未评价</div>
                            <div class="order_item_num">
                                <p><span>${data.time_out}</span>人</p>
                            </div>
                        </div>`)

                $(".order_list2").html(`<div class="order_item">
                            <div class="order_item_title">1分评价</div>
                            <div class="order_item_num">
                                <p><span>${data.score1}</span>人</p>
                            </div>
                        </div>
                        <div class="order_item">
                            <div class="order_item_title">2分评价</div>
                            <div class="order_item_num">
                                <p><span>${data.score2}</span>人</p>
                            </div>
                        </div>
                        <div class="order_item">
                            <div class="order_item_title">3分评价</div>
                            <div class="order_item_num">
                                <p><span>${data.score3}</span>人</p>
                            </div>
                        </div>
                        <div class="order_item">
                            <div class="order_item_title">4分评价</div>
                            <div class="order_item_num">
                                <p><span>${data.score4}</span>人</p>
                            </div>
                        </div>
                        <div class="order_item">
                            <div class="order_item_title">5分评价</div>
                            <div class="order_item_num">
                                <p><span>${data.score5}</span>人</p>
                            </div>
                        </div>`)
            }
        })
    }


    // 图表
    function echartsInit() {
        var myChart = echarts.init(document.getElementById('main'));
        var myChart2 = echarts.init(document.getElementById('main2'));

        // 指定图表的配置项和数据
        var option1 = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '0%',
                left: 'center'
            },
            series: [{
                type: 'pie',
                top: '10%',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                data: [{
                        value: data.score1,
                        name: '1分评价业主'
                    },
                    {
                        value: data.score2,
                        name: '2分评价业主'
                    },
                    {
                        value: data.score3,
                        name: '3分评价业主'
                    },
                    {
                        value: data.score4,
                        name: '4分评价业主'
                    },
                    {
                        value: data.score5,
                        name: '5分评价业主'
                    }
                ]
            }]
        };


        var option2 = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '0%',
                left: 'center'
            },
            series: [{
                type: 'pie',
                top: '10%',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                data: [{
                        value: data.user_evaluation,
                        name: '业主自主评价'
                    },
                    {
                        value: data.platform_evaluation,
                        name: '后台评价'
                    },
                    {
                        value: data.time_out,
                        name: '超时未评价'
                    }
                ]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option1);
        myChart2.setOption(option2);
    }

    // 重置
    function initial() {
        $('#start_time').val('')
        $('#end_time').val('')
        $('#project_id').val('')
        $('#region').val('')
    }
</script>

</html>